<template>
  <u-popup
    :popup="false"
    :show="show"
    mode="bottom"
    border-radius="40"
    class="select-address"
    @close="show = false"
  >
    <view class="df fdc address-pop bg-white radius" style="border-radius: 40rpx 40rpx 0 0;">
      <view>
        <view class="font-32 header flex-between u-p-30" style="padding: 30rpx;">
          <!-- <text class="light-color" @click="sureSelect">取消</text> -->
          <text>请选择所在地区</text>
          <!-- <text class="main-color" @click="sureSelect">确定</text> -->
          <u-icon name="close" color="#C8C9CC" size="28" @click="close"></u-icon>
        </view>
        <view class="select-address-nav" v-show="ready">
          <view
            class="nav-item flex-center font-32 u-line-1 "
            :class="{ active: key + 1 == level }"
            v-for="(index, key) in 3"
            :key="key"
            @tap.stop="navEvent(key)"
          >
            {{ nav['txt' + (key + 1)] }}
          </view>
        </view>
      </view>
      <view class="df fdr u-flex-1" style="overflow-y: auto;">
        <scroll-view class="scroll-list" scroll-y="true">
          <view
            class="item u-line-1 flex-between u-p-30" style="padding: 30rpx;"
            v-for="(item, k) in columns_obj['column_items' + level]"
            :key="k"
            @tap="itemEvent(item, level)"
          >
            <view
              class="u-flex-1 u-line-1 u-text-left"
              :class="item.name == active['item_name' + level] ? 'main-color' : ''"
              >{{ item.name }}</view
            >
            <u-icon
              :color="theme_color"
              v-show="item.name == active['item_name' + level]"
              name="checkbox-mark"
            ></u-icon>
          </view>
        </scroll-view>
      </view>
    </view>
  </u-popup>
</template>

<script>
  export default {
    data() {
      return {
        show: false,
        ready: true,
        nav: {
          txt1: this.choose_title,
          txt2: '',
          txt3: '',
          txt4: '',
        },
        def_nav: {
          txt1: '选择省',
          txt2: '选择市',
          txt3: '选择区',
          txt4: '选择街道',
        },
        active: {},
        columns_obj: {},
        level: 1,
        id: '',
        is_show: false,
        province_list: [],
        city_list: [],
        area_list: [],
        street_list: [],
        province_id: '',
        city_id: '',
        area_id: '',
        street_id: '',
        province_value: '',
        city_value: '',
        area_value: '',
        street_value: '',
        column_num: 3,
      }
    },
    props: {
      choose_title: {
        type: String,
        default: '请选择',
      },
      // 几级
      columns: {
        type: Number,
        default: 3,
      },
    },
    watch: {
      ready(val) {
        val && this.init()
      },
      columns: {
        handler(val) {
          this.column_num = ~~val
        },
        immediate: true,
      },
    },
    created() {
      this.region()
    },
    computed: {
      currentClass(item, index) {
        let v, n
        v = item.adcode
        n = item.name
        let val_1 = v && v == this.active['item_value' + index]
        let val_2 = n && n === this.active['item_name' + index]
        return val_1 || val_2 ? 'main-color' : 'black'
      },
    },
    methods: {
      open() {
		  console.log(111)
        this.show = true
      },
      close() {
        this.show = false
      },
      hideSelect() {
        this.$refs.popup.close()
      },
      navEvent(index) {
        ++index
        this.level = index
      },
      // 回显
      async showAddress(params) {
        console.log(params)
        if (params.province_id) {
          let [city_list, area_list, street_list] = await Promise.all([
            this.regionList({
              level: 2,
              adcode: params.province_id,
            }),
            this.regionList({
              level: 3,
              adcode: params.city_id,
            }),
            // this.regionList({
            //   level: 4,
            //   adcode: params.district_id,
            // }),
          ])
          this.$set(this.columns_obj, 'column_items' + 2, city_list)
          this.$set(this.columns_obj, 'column_items' + 3, area_list)
          // this.$set(this.columns_obj, 'column_items' + 4, street_list)
          let list = [
            {
              value: params.province_id,
              name: params.province_name,
            },
            {
              value: params.city_id,
              name: params.city_name,
            },
            {
              value: params.district_id,
              name: params.district_name,
            },
            {
              value: params.community_id,
              name: params.community_name,
            },
          ]
          list.map((item, index) => {
            this.active['item_value' + Number(index + 1)] = item.value
            this.active['item_name' + Number(index + 1)] = item.name
            this.nav['txt' + Number(index + 1)] = item.name
          })
          for (let i = 3; i >= 0; i--) {
            if (!this.nav['txt' + i]) {
              this.level = i - 1
              break
            }
          }
          this.level = this.level > 1 ? this.level : 3
        }
        this.open()
      },
      init() {
        for (let i = 1; i <= 3; i++) {
          if (i === 1) {
            this.nav['txt' + i] = this.choose_title
          } else {
            this.nav['txt' + i] = ''
          }
          this.$set(this.columns_obj, 'column_items' + i, [])
        }
      },
      resetValue() {
        for (let i = 1; i <= 3; i++) {
          if (i > this.level) {
            this.active['item_value' + i] = ''
            this.active['item_name' + i] = ''
            this.nav['txt' + i] = ''
            this.columns_obj['column_items' + i] = []
          }
        }
      },
      // 获取省市区街道
      async region() {
        let params = {
          level: this.level,
          adcode: this.id,
        }
        const res = await this.$api.common.system('getAreaData', params)
        if (res.code === 200) {
          const data = res.data
          this.$set(this.columns_obj, 'column_items1', data)
          console.log(this.columns_obj)
          console.log(this.level)
        }
      },

      // 回显省市区街道
      async regionList(params) {
        const res = await this.$api.common.system('getAreaData', params)
        if (res.code === 200) {
          return res.data
        }
      },
      async itemEvent(item, index) {
        let value, name
        value = item.adcode
        name = item.name
        this.active['item_value' + index] = value
        this.active['item_name' + index] = name
        console.log(this.active)
        this.nav['txt' + index] = name
        let type = index + 1
        let children = []

        if (type <= this.column_num) {
          children = await this.regionList({
            level: type,
            adcode: value,
          })
          if (
            JSON.stringify(children) === JSON.stringify(this.columns_obj['column_items' + index])
          ) {
            children = []
          }
          this.columns_obj['column_items' + type] = children
          this.$set(this.columns_obj, 'column_items' + type, children)
          console.log(this.columns_obj)
        } else {
          children = []
        }
        if (index === 3 || children.length <= 0) {
          if (index !== 3) {
            for (let i = 3; i >= 0; i--) {
              if (i > index) {
                this.active['item_value' + i] = ''
                this.active['item_name' + i] = ''
                this.nav['txt' + i] = ''
              }
            }
          }
          this.level = index
          // this.returnValue();
          // console.log('index######',index)
          this.sureSelect()
        } else {
          this.level = index + 1
          this.nav['txt' + (index + 1)] = this.choose_title

          // this.nav['txt' + (index + 1)] = this.def_nav['txt' + (index + 1)]
          this.resetValue()
        }
      },
      // 确定选择
      sureSelect() {
        let params = {
          ...this.active,
        }
        if (!params.item_value1) {
          this.showMsg('请选择省')
          return
        }
        if (!params.item_value2 && this.isListNone(this.columns_obj.column_items2)) {
          this.showMsg('请选择市')
          return
        }
        if (!params.item_name3 && this.isListNone(this.columns_obj.column_items3)) {
          this.showMsg('请选择地区')
          return
        }
        // if (!params.item_name4 && this.isListNone(this.columns_obj.column_items4)) {
        //   this.showMsg('请选择街道')
        //   return
        // }
        this.close()
        this.$emit('getAddress', params)
      },
    },
  }
</script>

<style lang="scss" scoped>
  .radius {
    border-radius: 40rpx 40rpx 0 0;
  }
.df {
  display: flex;
}
.fdr {
  flex-direction: row !important;
}
.u-line-1 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
	display: flex !important;
}
  .select-address {
    .address-pop {
      height: 820rpx;
      overflow: hidden;

      .header {
        height: 100rpx;
        box-shadow: 0 -2rpx 8rpx 0 rgba(0, 0, 0, 0.1);
      }

      .scroll-list {
        width: 100%;
      }

      .item {
        width: 100%;
        text-align: center;
      }
    }

    // 已选区域

    &-nav {
      display: flex;
      width: 100%;
      height: 96rpx;
      padding-left: 8rpx;
      overflow: hidden;
      border-bottom: 1px solid #e6e6e6;
      box-sizing: border-box;
      align-items: center;

      .nav-item {
        position: relative;
        width: 25%;
        height: 100%;
        padding: 0 16rpx;
        line-height: 96rpx;

        &.active {
          color: #FC7916;

          &::after {
            position: absolute;
            bottom: 1px;
            left: 50%;
            z-index: 2;
            width: 80rpx;
            height: 4rpx;
            background-color: #FC7916;
            content: '';
            transform: translateX(-50%);
          }
        }
      }
    }
  }
  .main-color{
	  color: #FC7916;
  }
  .u-flex-1 {
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      flex: 1;
  }
  .u-text-left {
    text-align: left;
  }
</style>
